<template>
  <div class="article_all" style="height: 100%;width: 100%;">
    <el-page-header @back="goBack" content="数据页面" style="margin-bottom: 20px"></el-page-header>
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="180px">
        <el-menu class="custom-menu" :default-active="'1'" style="height: 100%;">
          <el-menu-item index="1">数据概况</el-menu-item>
          <el-menu-item index="2">渠道统计</el-menu-item>
          <el-menu-item index="3">栏目统计</el-menu-item>
          <el-menu-item index="4">文章统计</el-menu-item>
          <el-menu-item index="5">安全监控</el-menu-item>
          <el-menu-item index="6">运维监控</el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <div style="display:flex;">
              <el-select v-model="optionValue" placeholder="请选择" style="width: 80px;text-align: center;">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            <div style="margin-left:auto">
              <el-button>今天</el-button>
              <el-button>昨天</el-button>
              <el-button style="margin-right: 20px;">7天内</el-button>
              <el-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']">
              </el-date-picker>
            </div>
          </div>
          <div style="margin-top: 20px;">
            <el-row :gutter="10" style="margin-bottom: 60px;">
              <el-col :span="6">
                <el-card style="color: #409EFF">
                  <div>浏览次数 PV</div>
                  <div style="padding: 10px 0; text-align: center; font-weight: bold;height: 50px;">
                    <span style="font-size: 28px;">80</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card style="color: #F56C6C">
                  <div>独立访问 UV</div>
                  <div style="padding: 10px 0; text-align: center; font-weight: bold;height: 50px;">
                    <span style="font-size: 28px;">45</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="4">
                <el-card style="color: #67C23A">
                  <div>IP</div>
                  <div style="padding: 10px 0; text-align: center; font-weight: bold;height: 50px;">
                    <span style="font-size: 28px;">45</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="4">
                <el-card style="color: #67C23A">
                  <div>留言</div>
                  <div style="padding: 10px 0; text-align: center; font-weight: bold;height: 50px;">
                    <span style="font-size: 28px;">0</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="4">
                <el-card style="color: #67C23A">
                  <div>咨询量</div>
                  <div style="padding: 10px 0; text-align: center; font-weight: bold;height: 50px;">
                    <span style="font-size: 28px;">20</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div>
            <el-row :gutter="18" style="margin-bottom: 60px;">
              <el-col :span="24">
                <div ref="lineChart" style="margin-top:-50px; width: 100%; height: 450px;"></div>
              </el-col>
            </el-row>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "Laucher",
  data() {
    return {
      value: " ",
      charts: "",
      opinionData: ["0", "0", "0", "0", "0", "0", "0", "0"], // 数据
      options: [{
          value: '选项1',
          label: '全站'
        }, {
          value: '选项2',
          label: '全站2'
        }, {
          value: '选项3',
          label: '全站3'
        }, {
          value: '选项4',
          label: '全站4'
        }, {
          value: '选项5',
          label: '全站5'
        }],
      optionValue:'全站',
    };
  },
  async mounted() {
    this.initChart();
    window.addEventListener('resize', () => {
      setTimeout(() => {
        if (this.charts) {
          this.charts.resize();
        }
      }, 500);
    });
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.lineChart);
      const option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [0, 100, 45, 200, 0, 0, 55, 0, 79],
          type: 'line'
        }]
      };
      chart.setOption(option);
      this.charts = chart;
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.custom-menu .el-menu-item.is-active {
  color: #7e72f2 !important;
  /* 更改为你想要的颜色 */
  background-color: #ebeafc;
}

.custom-menu .el-menu-item:hover {
  color: #7e72f2 !important;
  /* 更改为你想要的颜色 */
  background-color: #ebeafc;
}

.el-aside {
  color: #333;
  text-align: center;
}

.el-main {
  color: #333;
  text-align: center;
}

.article_all {
  text-align: center;
  margin: 20px;
}

.article_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.addArticle {
  background-color: #7e72f2;
  color: white;
  border-radius: 10px;
  margin-right: 10px;
}

.addArticle:hover {
  color: #ebeafc;
}

.article_head_left,
.article_head_right {
  display: flex;
  align-items: center;
}

.article_head_right {
  flex-wrap: wrap;
}

.article_head_left ::v-deep .el-input--suffix .el-input__inner {
  border-radius: 10px;
  box-shadow: 0 0 1px #7e72f2;
}

.control_button {
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  margin-right: 20px;
  cursor: pointer;
}

.pagination ::v-deep .el-pagination .el-pager .number.active {
  background-color: #7e72f2 !important;
  border-color: #7e72f2 !important;
  color: white !important;
}

.pagination ::v-deep .el-pagination .el-pager .number {
  color: #7e72f2 !important;
}

.pagination ::v-deep .el-pagination {
  position: relative;
}

.pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: right;
}

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
</style>
